<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户昵称">
                <a-input placeholder="请输入用户昵称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号">
                <a-input placeholder="请输入手机号" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="退款状态">
                <div class="flex">
                  <a-select v-model="queryParam.status">
                    <a-select-option key="-1">全部</a-select-option>
                    <a-select-option v-for="(item, key) in statusList" :key="key">{{ item }}</a-select-option>
                  </a-select>
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.audit_status" @change="$refs.table.refresh(true)">
          <a-radio-button value="-1">全部</a-radio-button>
          <a-radio-button :value="key" v-for="(item, key) in auditStatusList" :key="key"> {{ item }} </a-radio-button>
        </a-radio-group>
      </div>

      <s-table
        style="width: 100%; overflow-x: auto"
        :scroll="{ x: 'max-content' }"
        rowKey="id"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
        <div slot="name" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.avatar_url" alt="" />
            </div>
            <div class="info">
              <span>{{ record.nickname }}</span>
            </div>
          </div>
        </div>

        <span slot="status" slot-scope="text">
          <a-badge :color="getStatus(text)[1]" :text="getStatus(text)[0]" />
        </span>

        <span slot="audit_status" slot-scope="text">
          <a-badge :color="getAuditStatus(text)[1]" :text="getAuditStatus(text)[0]" />
        </span>

        <span slot="created_at" slot-scope="text">
          <span> {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
        </span>

        <span slot="action" slot-scope="text, record">
          <template v-if="record.audit_status === '0'">
            <a-button type="link" @click="handel('agree', record)" size="small">同意</a-button>
            <a-divider type="vertical" style="margin: 0 1px" />
            <a-button type="link" @click="handel('reject', record)" size="small">拒绝</a-button>
          </template>
          <span v-else>-</span>
        </span>
      </s-table>
    </a-card>

    <a-modal
      title="退款审核"
      width="800px"
      v-model="visible"
      @ok="handel('submit')"
      :destroyOnClose="true"
      :confirmLoading="btnLoading"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <template v-if="form.audit_status === '1'">
          <a-form-model-item label="退款金额" prop="refund_price">
            <a-input-number v-model="form.refund_price" :min="0" :precision="2"></a-input-number>
          </a-form-model-item>
          <a-form-model-item label="扣减余额" prop="sub_balance">
            <a-input-number v-model="form.sub_balance" :min="0" :precision="2"></a-input-number>
          </a-form-model-item>
          <a-form-model-item label="扣减积分" prop="sub_integral">
            <a-input-number v-model="form.sub_integral" :min="0" :precision="0"></a-input-number>
          </a-form-model-item>
        </template>
        <a-form-model-item label="管理员备注">
          <a-input class="inp" v-model="form.desc_admin" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { rechargeOrderRefundMoneyList, rechargeOrderRefundMoneyAudit } from '@/api/marketing'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '会员信息',
    scopedSlots: {
      customRender: 'name',
    },
  },
  {
    title: '充值订单号',
    dataIndex: 'order_no',
  },
  {
    title: '支付金额(元)',
    dataIndex: 'pay_price',
  },
  {
    title: '赠送金额(元)',
    dataIndex: 'send_price',
  },
  {
    title: '赠送积分',
    dataIndex: 'send_integral',
  },
  {
    title: '退款金额(元)',
    dataIndex: 'refund_price',
  },
  {
    title: '扣除积分',
    dataIndex: 'sub_integral',
  },
  {
    title: '扣除余额(元)',
    dataIndex: 'sub_balance',
  },
  {
    title: '申请状态',
    dataIndex: 'audit_status',
    scopedSlots: {
      customRender: 'audit_status',
    },
  },
  {
    title: '退款状态',
    dataIndex: 'status',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
    fixed: 'right',
    width: 150,
  },
]

export default {
  name: 'rechargeOrderAfterSales',
  components: {
    STable,
  },

  computed: {
    getStatus() {
      return (status) => {
        let text, color
        switch (status) {
          case '0':
            text = '未退款'
            color = 'rgba(0, 0, 0, 0.25)'
            break

          case '1':
            text = '已退款'
            color = '#65C817'
            break
        }
        return [text, color]
      }
    },

    getAuditStatus() {
      return (status) => {
        let text, color
        switch (status) {
          case '0':
            text = '待审核'
            color = 'rgba(0, 0, 0, 0.25)'
            break

          case '1':
            text = '已通过'
            color = '#65C817'
            break

          case '2':
            text = '已拒绝'
            color = '#FF4D4F'
            break
        }
        return [text, color]
      }
    },
  },

  data() {
    return {
      columns,
      modalLoading: false,
      queryParam: {
        name: null,
        phone: null,
        status: '-1',
        audit_status: '-1',
      },

      auditStatusList: {
        0: '待审核',
        1: '已通过',
        2: '已拒绝',
      },

      statusList: {
        0: '未退款',
        1: '已退款',
      },
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return rechargeOrderRefundMoneyList(parameter)
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },

      visible: false,
      btnLoading: false,
      form: {
        audit_status: '', //1通过2拒绝
        refund_id: '', //申请ID
        desc_admin: '', //管理员备注
        refund_price: '', //退款金额
        sub_balance: '', //扣减余额
        sub_integral: '', //扣减积分
      },
      rules: {
        refund_price: [{ required: true, message: '请填写', trigger: 'blur' }],
        sub_balance: [{ required: true, message: '请填写', trigger: 'blur' }],
        sub_integral: [{ required: true, message: '请填写', trigger: 'blur' }],
      },
    }
  },
  methods: {
    async status() {
      this.btnLoading = true
      const res = await rechargeOrderRefundMoneyAudit(this.form)
      this.btnLoading = false

      if (!res.code) {
        this.visible = false
        this.$message.success(res.msg)
        this.$refs.ruleForm.resetFields()
        this.$refs.table.refresh(true)
        this.form = {
          audit_status: '',
          refund_id: '',
          desc_admin: '',
          refund_price: '',
          sub_balance: '',
          sub_integral: '',
        }
        return
      }

      this.$message.error(res.msg)
    },

    handel(type, item) {
      switch (type) {
        case 'agree':
          this.form = {
            audit_status: '1',
            refund_id: item.id,
            desc_admin: '',
            refund_price: item.refund_price,
            sub_balance: item.sub_balance,
            sub_integral: item.sub_integral,
          }
          this.visible = true
          break

        case 'reject':
          this.form = {
            audit_status: '2',
            refund_id: item.id,
            desc_admin: '',
          }
          this.visible = true
          break

        case 'submit':
          this.submit()
          break
      }
    },

    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.status()
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
